<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>外卖登录界面</title>
    <link rel="icon" href="./../images/favico.ico">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../styles/login.css">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!--引入vue-->
    <script src="../../backend/plugins/vue/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css">
    <!-- 引入组件库 -->
    <script src="../../backend/plugins/element-ui/index.js"></script>
</head>

<body>
<div class="limiter" id="login">
    <div class="container-login100">
        <div class="wrap-login100">
            <div class="login100-form-title" style="background-image: url(./../images/bg-01.jpg);">
                <span class="login100-form-title-1">干 饭 人</span>
            </div>

            <form class="login100-form validate-form"  @submit.prevent="submit" >
                <div class="wrap-input100 validate-input m-b-26 ">
                    <input class="input100"  v-model="form.userName" type="text" placeholder="用户名/邮箱">
                    <span class="focus-input100"></span>
                </div>
                <div class="wrap-input100 validate-input m-b-18">
                    <input class="input100"   v-model="form.password" type="password" placeholder="密码">
                    <span class="focus-input100"></span>
                </div>
                <div class="flex-sb-m w-full">
                    <div class="contact100-form-checkbox">
                        <a href="./retrieve-password.html"> 忘记密码？</a>
                    </div>
                    <div>
                        <a href="./register.html" class="txt1">注册账号</a>
                    </div>
                </div>
                <div class="validate-input" data-validate="验证码" style="text-align: center;width: 100%;display: flex;justify-content: center;padding: 20px 10px">
<!--                    <div style="margin: auto 0">验证码：</div>-->
                    <el-input  v-model="code"  placeholder="请输入验证码"  @focus="cleanVerify(code,$event)" @blur="verifyNumber(code,$event)" size="small" style="width: unset"></el-input>
                    <canvas id="myCanvas" width="70px" height="27px" style="float: right; border:1px solid #d3d3d3;margin-left: 10px" @click="makeCode"></canvas>
                </div>
                <div class="container-login100-form-btn">
                    <button class="login100-form-btn" type="submit">登 录</button>
                </div>
            </form>
        </div>
    </div>
</div>



<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../api/login.js"></script>
<script>
    // createCode()
    function createCode() {
        code = "";
        var codeLength = 4;//验证码的长度，可变
        var canvas = document.getElementById('myCanvas');//获取画布
        var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//所有候选组成验证码的字符

        for (var i = 0; i < codeLength; i++) {
            var charIndex = Math.floor(Math.random() * 36);
            code += selectChar[charIndex];
        }
        if (canvas) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#FFFFFF';
            ctx.fillRect(0, 0, 70, 27);
            ctx.font = "20px arial";
            // 创建渐变
            var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
            gradient.addColorStop("0", "magenta");
            gradient.addColorStop("0.5", "blue");
            gradient.addColorStop("1.0", "red");
            // 用渐变填色
            ctx.strokeStyle = gradient;
            ctx.strokeText(code, 5, 20);//画布上添加验证码
            return code;
        }
    }
</script>

<script>
    new Vue({
        el: "#login",
        data() {
            return {
                form: {
                    userName: '',
                    password: ''
                },
                authCode:"",
                code:"",

                loading: false
            }
        },
        computed: {},
        created() {

        },
        mounted() {
            this.authCode=createCode()
        },
        methods: {
            verifyNumber(val, event) {
                if (val==null||val=="") {
                    event.currentTarget.style.border = "1px solid #DC143C"
                }
            },
            cleanVerify(val,event) {
                event.currentTarget.style.background="#f6f6f6"
            },
            async submit() {
                if (this.form.userName=="") {
                    // createCode()
                    this.makeCode()
                    this.$notify.error({
                        title: '用户名'+'不能为空',
                        position: 'top-left'
                    });
                    return;
                }
                if (this.form.password=="") {
                    this.makeCode()
                    this.$notify.error({
                        title: '密码出错'+'不能为空',
                        position: 'top-left'
                    });
                    return;
                }
                if (this.code.toUpperCase()!=this.authCode) {
                    this.makeCode()
                    this.$notify.error({
                        title: '验证码错误',
                        position: 'top-left'
                    });
                    return;
                }
                else{
                    loginApi(this.form).then(res => {
                        if (res.code!=1){
                            this.$notify.error({
                                title: res.msg,
                                position: 'top-left'
                            });
                        }else {
                            window.localStorage.setItem('user',JSON.stringify(res.data))
                            this.$notify.success({
                                title: "登录成功",
                                position: 'top-left'
                            });
                            window.requestAnimationFrame(()=>{
                                window.location.href= '/front/index.html'
                            })
                        }
                    })
                }
            },
            makeCode(){//刷新验证码
                this.authCode=createCode()
            }
        }
    })
</script>


</body>

</html>